<%--
  Created by IntelliJ IDEA.
  User: xiong
  Date: 2020/7/8
  Time: 10:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <style>
        /*div{*/
        /*    width: 50%;!*宽度*!*/
        /*    height: 200px;*/
        /*    margin-left: 20%;!*左外20%*!*/
        /*    text-align: center;!*内容水平居中*!*/
        /*    border: 1px #999999 solid;*/
        /*    margin-top: 10%;*/
        /*    padding-top: 100px;!*内部边距距顶部*!*/
        /*}*/
        .mainform{
            width: 50%;/*宽度*/
            height: 200px;
            margin-left: 20%;/*左外20%*/
            text-align: center;/*内容水平居中*/
            border: 1px #999999 solid;
            margin-top: 10%;
            padding-top: 100px;/*内部边距距顶部*/
        }
        input{
            width: 200px;
            height: 30px;
            margin-top: 5px;
        }
        .btn{
            border: red 1px solid;
            width: 200px;
            height: 30px;
            background: red;
            color: white;
            outline: none;/*没有边框线*/
        }
        form{
            text-align: center;
        }
    </style>
</head>
<body>
<script src="layui/layui.js"></script>

<%--    使用jstl,el表达式 进行登录提示,jsp 默认支持el，使用jstl标签需要引入jar包--%>
<%--    登录表单--%>
<%--    ${ } el表达式--%>
<%--    ${param.info}获取info参数--%>


    <div class="layui-form mainform">
        <c:if test="${param.info==1}">
            <span style="color: red ;font-size: 10px">错误提示账号密码错误</span>
        </c:if>
        <c:if test="${param.info==2}">
            <span style="color: red ;font-size: 10px">请先登录</span>
        </c:if>
        <c:if test="${param.info==3}">
            <span style="color: red ;font-size: 10px">退出成功</span>
        </c:if>
        <form action="/user/login" method="post" class="layui-form layui-form-pane">
            <input type="text" name="username" placeholder="用户名输入" lay-verify="username">
            <br/>

            <input type="password" name="password" placeholder="密码输入" lay-verify="pass">
            <br/>
            <input type="submit" value="登录" class="btn">
        </form>
    </div>


</body>
</html>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form;
         form.verify({
            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            }

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            ,pass: [
                /^[\S]{2,12}$/
                ,'密码必须2到12位，且不能出现空格'
            ]
        });
        //监听提交
        form.on('submit(formDemo)', function(data){
            //ajax
            //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value};获取单个值data.field["title"]
            // return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    })

</script>
